<style lang='scss'>
	.personal-setting-page {
		font-size: 15px;
	}
</style>
<template>
	<div class="setting-page table-contain-inner personal-setting-page">
		<el-card class="account-setting" shadow="hover">
			<div slot="header" class="title-contain">
				<span>基本信息</span>
			</div>
		  <div>
		  	<div class="settings-contain">
		  		<div class="setting-row">
		  			<p class="setting-item">
		  				<span class="title">用户名：</span>
		  				<span class="value" v-if="userInfo.name">{{userInfo.name}}</span>
		  			</p>
		  			<p class="setting-item"><span class="title">密码：</span><el-button type="text" @click="modifyPasswd">更改</el-button></p>
		  		</div>
		  		<div class="setting-row">
		  			<p class="setting-item"><span class="title">手机号：</span>
		  				<span class="value" v-if="userInfo.phone">{{userInfo.phone}}</span>
		  				<el-button type="text" @click="modifyPhone">更改</el-button>
		  			</p>
		  			<p class="setting-item">
		  				<span class="title">邮箱：</span>
		  				<span class="value" v-if="userInfo.email">{{userInfo.email}}</span>
		  				<el-button type="text" @click="modifyEmail">更改</el-button>
		  			</p>
		  		</div>
		  		<div class="setting-row">
		  			<p class="setting-item"><span class="title">出生日期：</span>
		  				<span class="value" v-if="userInfo.birthdate">{{userInfo.birthdate}}</span>
		  			</p>
		  			<p class="setting-item" v-if="userInfo.job"><span class="title">职位：</span>
		  				<span class="value">{{userInfo.job}}</span>
		  			</p>
		  		</div>
		  	</div>
		  </div>
		</el-card>
		<formDialog ref="edit_dialog"></formDialog>
	</div>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import formDialog from 'components/form_dialog.vue';
	import { verifyPasswd, verifyPhone, verifyMailbox } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				second_passwd: ''
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo||{};
			}
		},
		methods: {
			modifyPhone() {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("edit_phone", form_data)
				}, "修改手机号", [{title:"手机号",key:"phone", default_val: this.userInfo.phone}]);
			},
			modifyEmail() {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("edit_email", form_data)
				}, "修改邮箱", [{title:"邮箱",key:"email", default_val: this.userInfo.email}]);
			},
			modifyPasswd() {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("edit_passwd", form_data)
				}, "修改密码", [{title:"旧密码",key:"old_passwd",type:'password'},{title:"新密码",key:"new_passwd",type:'password'}], "修改后需要重新登录");
			},
			setData(operate_name, data) {
				//非空检测
				let check = true;
				for(let item in data) {
					if(data[item] == '' || data[item] == undefined) {
						check = false;
					}
				}
				if(!check) {
					this.$message.error('所有参数不能为空');return;
				}

				//格式检测
				let error_info = "";
				if(operate_name == "edit_email") {
					if(data.email == this.userInfo.email) {
						error_info = "邮箱和原邮箱相同";
					}else {
						error_info = verifyMailbox(data.email);
					}
				}else if(operate_name == "edit_phone") {
					if(data.phone == this.userInfo.phone) {
						error_info = "号码和原号码相同";
					}else {
						error_info = verifyPhone(data.phone);
					}
				}else if(operate_name == "edit_passwd") {
					error_info = verifyPasswd(data.new_passwd);
				}
				if(error_info) {
					this.$message.error(error_info);return;
				}

				let dialog = this.$refs.edit_dialog;
				dialog.triggerLoading();
				this.$axios.post('/user/editUser', data).then(res => {
    			if(res.s == 1) {
    				dialog.close();
    				if(operate_name == "edit_passwd") {
    					this.$message.success('修改成功，请重新登录');
  						this.$router.push({name:'login'});
    				}else {
    					this.$store.dispatch('loadUserInfo');
    					this.$message.success('修改成功');
    				}
    			}
    		}).finally(() => {
    			dialog.triggerLoading(false);
    		})
			},
		},
		components: {
			cusInput,
			formDialog
		}
	}
</script>